<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-row :gutter="10" class="top-block">
				<el-col :span="1.5">
					<el-button type="primary" @click="onOperation"> 添加改价任务 </el-button>
				</el-col>
				<RightToolbar v-model:showSearch="state.showSearch" @queryTable="getList" />
			</el-row>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="执行时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
				<el-table-column label="针对商品" align="center" prop="status" :formatter="formatterStatus" />
				<el-table-column label="改价类型" align="center" prop="type" :formatter="formatterType" />
				<el-table-column label="汇率数值(‰)" align="center" prop="proportion" :formatter="formatterProportion" />
				<el-table-column label="执行总数量" align="center" prop="num" />
				<el-table-column label="执行成功数量" align="center" prop="num_success">
					<template #default="{ row }">
						<el-link type="success">{{ row.num_success }}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="执行失败数量" align="center" prop="num_fail">
					<template #default="{ row }">
						<el-link type="danger">{{ row.num_fail }}</el-link>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<OperationDialog ref="operationDialogRef" />
	</div>
</template>

<script setup lang="ts" name="batchSettingPrice">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';

import { goodsApi } from '/@/api';
import { floatMultiply, timeDictionary } from '/@/utils/dictionary';

const OperationDialog = defineAsyncComponent(() => import('./dialog/operationDialog.vue'));

const GoodsApi = goodsApi()
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		type: '',
		pageNum:1,
		pageSize:10
	},
	tableList: [],
	loading: false,
	total: 0,
});
const operationDialogRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 添加
const onOperation = () => {
	operationDialogRef.value.openDialog(() => getList());
};

/********** 方法事件 **********/
const getList = () => {
	state.loading = true;
	_goodsChangePriceList(state.queryParams)
};
// 执行时间字典
const formatterCreateTime = (row:any) => {
	return timeDictionary(row.create_time)
}
// 针对商品字典
const formatterStatus = (row:any) => {
	switch (row.status) {
		case 0:
			return '全部商品'
		case 1:
			return '上架商品'
		case 2:
			return '下架商品'
		default:
			return '未知状态'
	}
}
// 改价类型字典
const formatterType = (row:any) => {
	switch (row.type) {
		case 1:
			return '增加'
		case 2:
			return '减少'
		default:
			return '未知状态'
	}
}
// 汇率数值字典
const formatterProportion = (row:any) => {
	return floatMultiply(row.proportion, 1000) + '‰'
}

/********** 网络事件 **********/
// 商品改价记录
const _goodsChangePriceList = (params: Object) => {
	GoodsApi.goodsChangePriceList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
</script>
